<template>
  <div>
    <!-- 新增表单 行内表单 -->
    <!-- 
      inline="true" 可以让表单域变为行内的表单域。即让该表单不换行，直到挤满该页面，才会换行 
      @submit.native.prevent  : native 表示对一个组件绑定系统原生事件, prevent: 表示提交以后不刷新页面
    -->
    <el-form
    ref="addform"
      :inline="true"
      class="demo-form-inline"
      @submit.native.prevent
      :model="form"
      label-width="80px"
    >
      <el-input
        v-model="form.product_name"
        placeholder="输入产品名称"
        @keyup.native.enter="onSubmit"
        class="input-with-select"
      >
        <el-select
          v-model="form.leixing"
          slot="prepend"
          placeholder="请选择"
          style="width: 110px"
        >
          <el-option label="唇部" value="lip"></el-option>
          <el-option label="眼部" value="eyes"></el-option>
          <el-option label="面部" value="face"></el-option>
          <el-option label="护肤刷具" value="skinbrush"></el-option>
        </el-select>
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="onSubmit"
        ></el-button>
      </el-input>
      <el-button @click="Add" type="info" plain>
        添加产品
        <i class="el-icon-upload el-icon--right"></i>
      </el-button>
      <el-drawer
            title="添加明星产品信息"
            ref="addform"
            :rules="rules"
            :model="addform"
            :visible.sync="AddDrawer"
            :AddDirection="AddDirection"
            :before-close="HandleClose"
            style="color: #666; font-size: 25px"
          >
          <el-divider></el-divider>
        <el-form-item label="产品名称">
          <el-input v-model="addform.product_name" placeholder="请输入产品名称" />
        </el-form-item>
        <el-form-item label="英文名称">
            <el-input v-model="addform.product_rgn_name" placeholder="请输入英文名称" />
        </el-form-item>
        <el-form-item label="型号">
            <el-input v-model="addform.shade_name" placeholder="请输入产品型号" />
        </el-form-item>
        <el-form-item label="介绍">
            <el-input v-model="addform.product_brief_description" placeholder="请输入产品型号" />
        </el-form-item>
        <el-form-item label="产品价格">
            <el-input v-model="addform.product_price" placeholder="请输入产品价格" />
        </el-form-item>
        <el-form-item label="选择类型">
        <el-select v-model="addform.leixing" placeholder="请选择"  >
            <el-option value="lip">唇部</el-option>
            <el-option value="eyes">眼部</el-option>
            <el-option value="face">面部</el-option>
            <el-option value="skinbrush">护肤和刷具</el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="封面图">
            <el-input v-model="addform.img" placeholder="请输入图片路径" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="AddSubmit()"
          style=" margin-left: 180px;"
            >立即新增
          </el-button>
        </el-form-item>
      </el-drawer>
    </el-form>
    <el-divider content-position="left"> 产品列表 </el-divider>

    <!-- 表格 -->
    <!-- label: 列名  prop: 列值 -->
    <el-table :data="stars" class="cell">
      <el-table-column label="封面图" width="200px" align="center">
        <!--  
          slot-scope="scope" 来取得作用域插槽:data绑定的数据,
          scope可以随便替换其他名称,只是定义对象来代表取得的data数据,便于使用 
          相当于定义插槽, 可以访问.row.pic拿到每一行对象的属性, 固定写法
        -->
        <template slot-scope="scope">
          <img :src="scope.row.img" width="120px" alt="" />
        </template>
      </el-table-column>
      <el-table-column
        label="产品名称"
        prop="product_name"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="英文名称"
        prop="product_rgn_name"
        align="center"
      >
      </el-table-column>
      <el-table-column label="产品价格(￥)" prop="product_price" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" width="170px">
        <template slot-scope="scope">
          <!-- 修改按钮 -->
          <el-button
            size="small"
            @click="openright(scope.row.id)"
            type="warning"
            icon="el-icon-edit"
            style="margin-right: 10px"
            circle
          >
          </el-button>
          <el-drawer
            title="修改明星产品信息"
            :visible.sync="drawer"
            :direction="direction"
            :before-close="handleClose"
            style="color: #666; font-size: 25px"
          >
            <el-divider></el-divider>
            <el-form ref="form2" label-width="80px" style="width: 300px">
              <el-form-item label="产品名称">
                <el-input
                  v-model="form2.product_name"
                  placeholder="请输入产品名称"
                />
              </el-form-item>
              <el-form-item label="英文名称">
                <el-input
                  v-model="form2.product_rgn_name"
                  placeholder="请输入英文名称"
                />
              </el-form-item>
              <el-form-item label="产品型号">
                <el-input
                  v-model="form2.shade_name"
                  placeholder="请输入产品型号"
                />
              </el-form-item>
              <el-form-item label="产品介绍">
                <el-input
                  v-model="form2.product_brief_description"
                  placeholder="请输入产品介绍"
                />
              </el-form-item>
              <el-form-item label="产品价格">
                <el-input
                  v-model="form2.product_price"
                  placeholder="请输入产品价格"
                />
              </el-form-item>
              <el-form-item label="图片路径">
                <el-input v-model="form2.img" placeholder="请输入图片路径" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submit(form2.pid)"
                  >立即修改</el-button
                >
              </el-form-item>
            </el-form>
          </el-drawer>
          <!-- 删除按钮 -->
          <el-button
            @click="delItem(scope.row.id)"
            size="small"
            type="danger"
            icon="el-icon-delete"
            circle
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 添加
      AddDrawer: false,
      AddDirection: "rtl",
      // 修改
      drawer: false,
      direction: "rtl",
      dialogFormVisible: false, 
      stars: [], // 绑定当前页面显示的产品列表数据
      form2: [],
      form: {
        product_name: "",
        leixing: "",
      },
      addform:{
        id:null,
        product_name:"",
        product_rgn_name:"",
        product_price:"",
        img:"",
        shade_name:"",
        product_brief_description:"",
        leiixng:'',

      }
      ,
      rules: {
        product_name: [{ required: true, message: "产品名称必须填写", trigger: "blur" }], //
        product_rgn_name: [{ required: true, message: "英文名称必须填写", trigger: "blur" }], //
        product_price: [{ required: true, message: "价格必须填写", trigger: "blur" }], //
        img: [{ required: true, message: "图片必须填写", trigger: "blur" }], //
        shade_name: [{ required: true, message: "型号必须填写", trigger: "blur" }], //
        product_brief_description: [{ required: true, message: "介绍必须填写", trigger: "blur" }], //
      },
    };
  },
  methods: {
    // 添加
    Add(pid) {
      this.AddDrawer = true;
    },
    HandleClose(done) {
      this.AddDrawer = false;
    },
    AddSubmit(pid) {
      this.$refs["addform"].validate((valid) => {
        if (valid) {
          this.$http.starApi.add(this.addform).then((res) => {
            this.AddDrawer = false;
            this.$http.starApi.queryAll().then((res) => {
      // 将res.data.data存入this.stars;
      this.stars = res.data.data;
    });
            });
          }
          });
  },

    // 修改
    openright(id) {
      this.drawer = true;
      this.$http.starApi.queryById({ id }).then((res) => {
        this.form2 = res.data.data[0];
      });
    },
    handleClose(done) {
      this.drawer = false;
    },
    submit() {
      this.$http.starApi.update(this.form2).then((res) => {
        this.drawer = false;
        this.$http.starApi.queryAll().then((res) => {
          // 将res.data.data存入this.stars;
          this.stars = res.data.data;
        });
      });
    },
    onSubmit() {
      // 当点击查询按钮后执行
      let params = {
        product_name: this.form.product_name,
        leixing: this.form.leixing,
      };
      this.$http.starApi.queryAllByNameAndleixing(params).then((res) => {
        if (res.data.data == "") {
          return this.$message({
            message: "非常可惜 , 没有找到哦~",
            type: "warning",
          });
        }
        // 替换
        this.stars = res.data.data;
      });
    },
    // 删除产品列表项 发送请求 删除成功后更新列表
    delItem(id) {
      // 弹出确认删除对话框
      this.$confirm("该操作永久删除产品,是否继续?", "提示", {
        type: "warning",
      }).then(() => {
        // 确认删除
        // 发送请求, 执行删除操作
        this.$http.starApi.delete({ id }).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "删除产品完成",
            });
            this.$http.starApi.queryAll().then((res) => {
              // 将res.data.data存入this.stars;
              this.stars = res.data.data;
            });
          }
        });
      });
    },
  },
  /**组件挂载完毕后自动调用 生命周期方法 */
  mounted() {
    // 发送请求, 加载底妆列表
    this.$http.starApi.queryAll().then((res) => {
      // 将res.data.data存入this.stars;
      this.stars = res.data.data;
    });
  },
};
</script>

<style lang="scss" scoped>
.input-with-select {
  width: 350px;
  margin-right: 15px;
}
</style>
